<template>
	<div>
		<div class="nav-title flex align-center">
			<p>审批配置信息</p>
			<div class="primary-btn" v-if="!isDetail" @click="handleOpenSelect">选择</div>
		</div>
		<div class="nav-title flex align-center mt10">
			<span class="primary-tag fc">{{ model.subsidyTypeLabel }}</span>
			<span class="border-orange-tag fc" v-if="model.subsidyApplyConfigName">{{ model.subsidyApplyConfigName }}</span>
		</div>

		<AuditConfigDetail :model="nowData" :approvalConfigId="nowData.approvalConfigId" v-if="!drawer"></AuditConfigDetail>

		<el-drawer v-model="drawer" title="选择审批配置" size="40%" :lock-scroll="false" :modal="true" append-to-body>
			<el-page-header @back="drawer = !drawer">
				<template #content>
					<span class="text-large font-600 mr-3"> 请点击选择审批配置 </span>
				</template>
			</el-page-header>
			<el-scrollbar height="80vh">
				<el-card v-for="(item, index) in configList" :key="index" class="mt10" @click.native="handleSelectConfig(item)">
					<el-descriptions :title="item.workflowName" :column="1">
						<el-descriptions-item label="编号">{{ item.randomNo }}</el-descriptions-item>
						<el-descriptions-item label="周期">{{ item.cycleLabel }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-scrollbar>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import AuditConfigDetail from '@/views/instOperate/auditConfig/detail/index.vue'

const props = withDefaults(
	defineProps<{
		model: any
		isDetail?: boolean
	}>(),
	{
		isDetail: false,
	}
)

const emit = defineEmits(['change'])
const nowData: any = ref(props.model)
const configList = ref([])
const drawer = ref(false)
const workflowConfiguration = ref([])

const handleOpenSelect = () => {
	drawer.value = true
	getCofigList()
}
const handleSelectConfig = (item) => {
	drawer.value = false
	nowData.value = item
	workflowConfiguration.value = item.workflowConfiguration ? JSON.parse(item.workflowConfiguration) : []
	props.model.approvalConfigId = item.randomNo
	props.model.subsidyApplyConfigName = item.workflowName
	emit('change', nowData.value)
}
const getCofigList = () => {
	apiMod
		.view_workflow_list({
			subsidyType: props.model.subsidyType,
		})
		.then((res) => {
			configList.value = res.data.filter(item=>item.cycle).map((item) => {
				const temp = [
					{ label: '月', value: 1 },
					{ label: '季度', value: 2 },
					{ label: '半年', value: 3 },
					{ label: '年', value: 4 },
				]
				return {
					...item,
					cycleLabel: temp.find((v) => v.value === item.cycle).label,
				}
			})
		})
}
</script>

<style scoped lang="scss">
.nav-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	.primary-btn {
		margin-left: 10px;
		border: 1px solid #0052d9;
		color: #0052d9;
		background: #fff;
		border-radius: 4px;
		height: 31px;
		font-size: 14px;
		padding: 6px 16px;
		&:hover {
			cursor: pointer;
		}
	}
}
</style>
